<template>
  <el-card class="card" :body-style="{ padding: '0px' }">
    <img v-if="book.imgUrl" :src="baseUrl + book.imgUrl" class="card-image" />
    <div class="card-bottom">
      <div>{{ book.bookName }}</div>
      <div class="small">{{ book.author }}</div>
      <div class="small publisher">{{ book.publisher }}</div>
      <div>
        <el-button
          type="text"
          class="card-button"
          @click="routeToBook(book.isbn)"
        >detail
        </el-button>
      </div>
    </div>
  </el-card>
</template>
<script lang="ts" setup>
import { BASE_URL } from "@/config/constant";
import type { Book } from "@/domain/book";
import { useRouter } from "vue-router";

const baseUrl = BASE_URL;
const props = defineProps<{
  book: Book;
}>();
const router = useRouter();
const routeToBook = (isbn: string) => {
  router.push({
    //你需要接受路由的参数再跳
    path: "/book/" + isbn,
  });
};
</script>
<style>
.card-image {
  width: 100%;
  display: block;
}

.card-bottom {
  padding: 14px;
  text-align: left;
}
.small {
  padding-top: 5px;
  font-size: 13px;
  color: #999;
}
.publisher {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-button {
  padding: 0;
  float: right;
}

</style>
